<template>
  <div class="calender">
    <el-calendar>
      <!-- 这里使用的是 2.5 slot 语法，对于新项目请使用 2.6 slot 语法-->
      <template slot="dateCell" slot-scope="{ date, data }">
        <p
          :class="data.isSelected ? 'is-selected' : ''"
          @click="handleClickCalender(date)"
        >
          {{ data.day.split("-").slice(2).join("-") }}
          <i v-if="isAllDone && data.isSelected">✔️</i>
          <i v-else-if="data.isSelected">✘</i>
        </p>
      </template>
    </el-calendar>
  </div>
</template>

<script>
import { mapActions, mapGetters } from "vuex";
import { getDate } from "@/utils/index";
export default {
  components: {},
  data() {
    return {
      msg: "",
    };
  },
  mounted() {
    this.initDate();
  },
  created() {},
  computed: {
    ...mapGetters("todo", ["isAllDone"]),
  },
  methods: {
    ...mapActions("todo", ["getList", "targetTime"]),
    handleClickCalender(arg) {
      var datetime = this.parseTime(arg, "{y}-{m}-{d}");
      // 设置目标日期
      this.targetTime(datetime);
      // 请求加载对应时间的数据
      this.getList(datetime);
    },
    // 初始化vuex中的时间
    initDate() {
      this.targetTime(getDate());
    },
  },
};
</script>

<style scoped lang="scss">
// #c0c4cc
.is-selected {
  color: #1989fa;
}
.calender {
  float: left;
  width: 100%;
  height: 100%;
}
.el-calendar {
  width: 100%;
  height: 100%;
}
</style>

<style lang="scss">
/** 设置单个日期元素大小，只有全局才有效 */
.el-calendar-table .el-calendar-day {
  height: 72px;
}
</style>